@import '../style/theme/color';
@import '../style/theme/corner';
@import '../style/core/_font';

@mixin ellipsis() {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;

  .devui-progress-default-text {
    width: fit-content;
    margin: 0;
    padding: 0 8px;
    color: $devui-text;
    font-size: $devui-font-size;
    line-height: 1;
  }

  .devui-progress-line,
  .devui-progress-circle {
    flex: 1 1 auto;
    position: relative;
  }

  .devui-progress-line {
    background: $devui-dividing-line;
    border-radius: $devui-border-radius-full;

    .devui-progress-bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      transition: width 0.6s ease;
      border-radius: $devui-border-radius-full;

      &.devui-progress-bar-default-bg {
        background-color: $devui-brand;
      }

      & > span {
        color: $devui-light-text;
        font-size: $devui-font-size;
        position: absolute;
        right: 8px;
        height: 100%;
        line-height: 100%;
        @include ellipsis();
      }
    }

    & > span {
      color: $devui-light-text;
      font-size: $devui-font-size;
      display: block;
      white-space: nowrap;
      position: absolute;
      left: 50%;
      top: 0;
      width: fit-content;
      transform: translateX(-50%);
      @include ellipsis();
    }
  }

  .devui-progress-circle {
    height: 100%;

    .devui-progress-default-text {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      @include ellipsis();
    }

    .devui-progress-circle-trail {
      stroke: $devui-dividing-line;
    }

    .devui-progress-circle-path {
      stroke: $devui-brand;
    }
  }
}
